


<template>
    <div class="white-module module">
      <div class="title"><span></span>赛事报名</div>
  
      <div class="info">
        <div class="item"><span>参与代表队</span>山东省潍坊市第一中学</div>
        <div class="item"><span>领队</span>王大大</div>
  
        <div class="item"><span>晋级赛事</span>第七届全国青少年无人机大赛</div>
        <div class="item"><span>晋级赛项</span>空中格斗赛</div>
        <div class="item"><span>赛项组别</span>初中组</div>
        <div class="item"><span>比赛时间</span>2023-4-23~2023-5-14</div>
        <div class="item"><span>报名时间</span>2023-04-23 14:05:27</div>
        <div class="item"><span>晋级选手</span>张三</div>
        <div class="item"><span>指导老师</span>李琦</div>
  
        <div class="item">
          <span><span>*</span>报名表(盖章)</span>
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            >
            <div class="image">

     
                <img v-if="imageUrl" :src="imageUrl" class="img" />
            <div v-else class="upload">
                <img src="@/assets/common/upload.png">
                <div class="text">上传附件</div>
            </div>       </div>
            </el-upload>
        </div>
      
      </div>
     
      <div class="hint">
        注：赛前请关注 参赛报名 > 报名记录 > 对应赛事赛项的参赛时间信息；
      </div>
      <div class="btns">
           <el-button type="primary">确认晋级参赛</el-button>
           <el-button >取消</el-button>
      </div>
    </div>
  </template>
  
<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}

</script>
  
<style lang="scss" scoped>
.module {
    padding: 20px 0px;
    margin-bottom: 12px;
    position: relative;

    .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: $font-weight-bold;
        padding: 0px 24px;

        span {
            width: 4px;
            height: 12px;
            background: #00a0e9;
            margin-right: 7px;
        }
    }

    .info {
        margin-bottom: 40px;

        .item {
            display: flex;
            align-items: flex-start;
            margin-top: 14px;
            font-family: PingFangSC-Regular, PingFang SC;

            >span {
                width: 136px;
                text-align: right;

                font-weight: $font-weight-bold;
                margin-right: 20px;
                font-family: PingFangSC-Medium, PingFang SC;

                span {
                    color: #D9161C;
                }
            }

            .el-input {
                width: 220px;
            }

            .el-select {
                width: 220px;
            }

            .image {
                width: 120px;
                height: 120px;
                background: rgba(222, 224, 227, 0.23);
                border-radius: 4px;
                border: 1px solid #DEE0E3;

                >.img {
                    width: 100%;
                    height: 100%;
                }

                .upload {
                    padding-top: 30px;

                    img {
                        width: 24px;
                        height: 24px;
                        display: block;
                        margin: auto;
                    }

                    .text {
                        text-align: center;
                        margin-top: 8px;
                        color: #959CA9;
                        font-size: 14px;
                    }
                }
            }
        }
    }


    .hint {
        text-align: center;
        margin: 50px 0px 20px;

        color: #959CA9;
        font-size: 12px;
    }

    .btns {
       
        display: flex;
        justify-content: center;
        padding-bottom: 5px;
        .el-button{
            width: 108px;
            height: 38px;
        }
    }
}</style>
  